<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.source.js?skin=blue"></script>
    <title>PSS-账户管理</title>
    <style>
        .alt td{ background:black !important;}
    </style>
    <script>
        $(function () {
//            新增
            $(".btn_input").click(function () {
                window.location.href = $(this).data("url");
            });
//            部门的回显
            $(":input[name=deptId] option[value='${qo.deptId}']").prop("selected",true);
//            删除的对话框
            $(".btn_delete").click(function () {
                var url = $(this).data("url");
                art.dialog({
                    title:"温馨提示",
                    content:"确定要删除吗?",
                    icon:"face-smile",
                    ok:function () {
                    window.location.href=url;
                    },
                    cancel:true
                })
            });
//            分页
            $(".btn_page").click(function () {
                var pageNo = $(this).data("page") || $(":text[name=currentPage]").val();
                $(":text[name=currentPage]").val(pageNo);
                $("#searchForm").submit();
            });
            //            分页下拉框的值改变事件
            $(":input[name=pageSize]").change(function(){
                $(":text[name=currentPage]").val(1);
                $("#searchForm").submit();
            });
//            分页下拉框的回显
            $(":input[name=pageSize] option[value='${employees.pageSize}']").prop("selected",true);
        });

    </script>
</head>
<body>
<form id="searchForm" action="/employee/list.do" method="post">
    <div id="container">
        <div class="ui_content">
            <div class="ui_text_indent">
                <div id="box_border">
                    <div id="box_top">搜索</div>
                    <div id="box_center">
                        姓名/邮箱
                        <input type="text" class="ui_input_txt02" name="keyword" value="${qo.keyword}" />
                        所属部门
                        <select class="ui_select01" name="deptId">
                            <option value="-1">请选择</option>
                            <c:forEach items="${departments}" var="dept">
                                <option value="${dept.id}">${dept.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div id="box_bottom">
                        <input type="button" value="查询" class="ui_input_btn01 btn_page" data-page="1"/>
                        <input type="button" value="新增" class="ui_input_btn01 btn_input" data-url="/employee/input.do">
                    </div>
                </div>
            </div>
        </div>
        <div class="ui_content">
            <div class="ui_tb">
                <table class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
                    <tr>
                        <th width="30"><input type="checkbox" id="all" /></th>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>EMAIL</th>
                        <th>年龄</th>
                        <th>所属部门</th>
                        <th>角色</th>
                        <th>操作</th>
                    </tr>
                    <tbody>
                    <c:forEach items="${employees.result}" var="item">
                    <tr>
                        <td><input type="checkbox" name="IDCheck" class="acb" /></td>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.email}</td>
                        <td>${item.age}</td>
                        <td>${item.department.name}</td>
                        <td>角色1，角色2</td>
                        <td>
                            <a href="/employee/input.do?id=${item.id}">编辑</a>
                            <a class="btn_delete" data-url="/employee/delete.do?id=${item.id}" href="javascript:;">删除</a>
                        </td>
                    </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
            <div class="ui_tb_h30">
                <div class="ui_flt" style="height: 30px; line-height: 30px;">
                    共有
                    <span class="ui_txt_bold04">${employees.totalCount}</span>
                    条记录，当前第
                    <span class="ui_txt_bold04">${employees.currentPage}/${employees.totalPage}</span>
                    页
                </div>
                <div class="ui_frt">
                    <input type="button" value="首页" class="ui_input_btn01 btn_page" data-page="1"/>
                    <input type="button" value="上一页" class="ui_input_btn01 btn_page" data-page="${employees.prevPage}"/>
                    <input type="button" value="下一页" class="ui_input_btn01 btn_page" data-page="${employees.nextPage}"/>
                    <input type="button" value="尾页" class="ui_input_btn01 btn_page" data-page="${employees.totalPage}"/>

                    <select  name="pageSize" class="ui_select02">
                        <option>5</option>
                        <option>10</option>
                        <option>20</option>
                        <option>50</option>
                    </select>
                    转到第<input type="text" name="currentPage" value="${employees.currentPage}" class="ui_input_txt01" />页
                    <input type="button" class="ui_input_btn01 btn_page" value="跳转"/>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
</html>
